<template>
  <div>
    <!--货代询价搜索-->
    <div style="padding: 20px; background-color: #f5f7fa; border-radius: 8px">
      <el-form>
        <el-row>
          <el-col :span="5">
            <el-form-item label="询价编码" style="margin-left: 10px">
              <el-input v-model="filters.inquiryCode" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="订单编码" style="margin-left: 15px">
              <el-input v-model="filters.orderCode" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="状态" style="margin-left: 15px">
              <el-select
                v-model="filters.status"
                placeholder="全部"
                style="width: 240px"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-button
              type="primary"
              style="margin-left: 15px"
              @click="initData"
              >搜索</el-button
            >
            <el-button type="primary" @click="reset">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- 添加询价 -->
    <div style="text-align: right">
      <el-button type="primary" @click="openAddInquiry"> 增加 </el-button>
    </div>
    <!-- 询价列表 -->
    <el-table
      :data="tableData"
      style="width: 100%"
      stripe
      border
      :header-cell-style="{ 'text-align': 'center' }"
      :cell-style="{ 'text-align': 'center' }"
    >
      <el-table-column type="index" label="行号" width="80" />
      <el-table-column prop="inquiryCode" label="询价编码" width="200" />
      <el-table-column prop="orderCode" label="订单编码" width="200" />
      <el-table-column prop="createTime" label="询价时间" width="250" />
      <el-table-column
        prop="status"
        label="状态"
        :formatter="formatStatus"
        width="180"
      />
      <el-table-column label="操作" class="button-container">
        <template v-slot="{ row }">
          <el-button text type="primary" @click="edit(row.inquiryCode)">
            编辑
          </el-button>
          <el-button text type="primary" @click="lookOffer">
            查看报价
          </el-button>
          <el-button text type="primary"> 催促报价 </el-button>
          <el-button text type="primary"> 更新货运 </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <div
      style="
        background-color: #fff;
        height: 50px;
        line-height: 50px;
        text-align: right;
      "
    >
      <el-pagination
        background
        :page-size="pageSize"
        :page-sizes="[1, 10, 20]"
        layout="total,sizes,prev, pager, next,jumper"
        :total="total"
        @size-change="chgsize"
        @current-change="chgpg"
      />
    </div>
  </div>
</template>
<script setup>
import { reactive, ref, onMounted } from "vue";
//引入图标
import { Edit } from "@element-plus/icons-vue";
// 引入消息组件
import { ElMessage } from "element-plus";
//引入路由
import { useRouter } from "vue-router";
//引入api
import { queryForwarderInquiry } from "@/api/forwarderInquiry";
import path from "path";

//路由实例
const router = useRouter();
// 新增，编辑状态标识
const isEditing = ref(true);

const options = [
  {
    value: "",
    label: "全部"
  },
  {
    value: "1",
    label: "未报价"
  },
  {
    value: "2",
    label: "已报价"
  }
];
//过滤条件
const filters = ref({
  inquiryCode: "",
  orderCode: "",
  status: ""
});
//重置
function reset() {
  filters.value = {
    inquiryCode: "",
    orderCode: "",
    status: ""
  };
  initData();
}
//路由跳转（增加货代询价）
function openAddInquiry() {
  isEditing.value = false;
  router.push({
    path: "/forwarder/addInquiry",
    query: { isEditing: isEditing.value }
  });
}
//跳转
function lookOffer() {
  router.push("/forwarder/lookOffer");
}
const tableData = ref([]);
//查询数据 异步函数
async function initData(params) {
  let data = {
    pageNum: page.value,
    pageSize: pageSize.value,
    inquiryCode: filters.value.inquiryCode,
    orderCode: filters.value.orderCode,
    status: filters.value.status
  };
  //查询数据
  let res = await queryForwarderInquiry(data);
  if (res.code == 200) {
    tableData.value = res.data.data;
    //接收分页信息
    page.value = res.data.page;
    pageSize.value = res.data.pageSize;
    total.value = res.data.total;
  }
  console.log(tableData.value);
}
// 格式化状态列的函数
const formatStatus = (row, column, cellValue) => {
  if (cellValue === 0 || cellValue === 1) {
    return "待报价/报价中";
  } else if (cellValue === 2) {
    return "已报价";
  }
  return cellValue;
};
function edit(id) {
  router.push({
    path: "/forwarder/addInquiry",
    query: { id: id, isEditing: isEditing.value }
  });
}

//分页信息
const page = ref(1); //当前页 默认第1页
const pageSize = ref(10); //每页记录数
const total = ref(0); //总记录数
//每页记录数变化
function chgsize(size) {
  //更改每页记录数
  pageSize.value = size;
  //从每页开始查询
  page.value = 1;
  //查询数据
  initData();
}

//页面发生变化
function chgpg(pg) {
  // console.log(pg);
  //更改当前页
  page.value = pg;
  console.log(page.value);
  //查询数据
  initData();
}

onMounted(() => {
  initData();
});
</script>

<style scoped>
.button-container {
  display: flex; /* 使用flex布局 */
  justify-content: start; /* 子元素从容器起始位置排列 */
  gap: 5px; /* 设置子元素之间的间距为5像素，可按需调整 */
}
</style>
